<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>湖南省自来水公司营销管理信息系统</title>

	<link rel="stylesheet" href="../css/reset.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/text.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/form.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/buttons.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" title="no title" />

	<link rel="stylesheet" href="../css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/jquery.visualize.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/facebox.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/uniform.default.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/dataTables.css" type="text/css" media="screen" title="no title" />

	<link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen" title="no title">
	<style type="text/css">
	.reportDiv { padding:10px 40px; }
	table.report thead th { background-color:#CCCCCC; }
	.split { background-color:#ccc; }
	table.report tfoot td { padding:0px; }
	table.report tfoot td div { margin:0px; overflow:hidden; width:80px;  }
	</style>
</head>

<body>

<div id="wrapper">

	<div id="bool"><script>window.onload=function (){  $("#bool").load("../ming.html");}</script></div>


	<div id="masthead">
		<div>
			<span id="pagetitle"><a href="javascript:;">销账明细报表</a></span>
			<span id="welcome_span">欢迎回来，马云</span>
		</div>
	</div> <!-- #masthead -->

	<div class="reportTitle">
		销账明细报表
	</div>

    <div class="reportTitle">
        <button class="btn" onclick="ExportToExcel();">导出到Excel文件</button>
    </div>

    <div class="reportDiv" style="width:2080px;">
        <div id="app">
        <table class="data display datatable" id="tableExcel">
			<thead>
				<th width="160">交费单号</th>
				<th width="80">发票号</th>
				<th width="80">发票类型</th>
				<th width="80">交费日期</th>
				<th width="80">交费金额</th>
				<th width="80">已用金额</th>
				<th width="80">剩余金额</th>
				<th width="80">收费员</th>
				<th width="80">生活用水量</th>
				<th width="80">商业用水量</th>
				<th width="80">工业用水量</th>
				<th width="80">行政用水量</th>
				<th width="80">军区用水量</th>
				<th width="80">特种用水量</th>
				<th width="80">销账总水量</th>
				<th width="80">生活用水销账</th>
				<th width="80">商业用水销账</th>
				<th width="80">工业用水销账</th>
				<th width="80">行政用水销账</th>
				<th width="80">军区用水销账</th>
				<th width="80">特种用水销账</th>
				<th width="80">垃圾费销账</th>
				<th width="80">污水费销账</th>
				<th width="80">资源费销账</th>
				<th width="80">销账总金额</th>
			</thead>
			<tbody>
            <tr v-for="(i,sort) in list">
                <td>{{i.PayNo}}</td>
                <td>{{i.Invoice}}</td>
                <td v-if="i.InvoiceType==0">普通发票</td>
                <td v-if="i.InvoiceType==1">增值税发票</td>
                <td>{{i.PayDate}}</td>
                <td>{{i.PayMoney}}</td>
                <td>{{i.UseMoney}}</td>
                <td>{{i.PayMoney-i.UseMoney}}</td>
                <td class="split" STYLE="background:#C5C5C5">{{i.EmpNmae}}</td>
                <td>{{i.Amount}}</td>
                <td>{{i.Amount}}</td>
                <td>{{i.Amount}}</td>
                <td>{{i.Amount}}</td>
                <td>{{i.Amount}}</td>
                <td>{{i.Amount}}</td>
                <td class="split" STYLE="background:#C5C5C5">{{i.Amount}}</td>
                <td>{{i.Amount}}</td>
                <td>{{i.Amount}}</td>
                <td>{{i.Amount}}</td>
                <td>{{i.Amount}}</td>
                <td>{{i.Amount}}</td>
                <td>{{i.Amount}}</td>
                <td>{{i.Amount}}</td>
                <td>{{i.Amount}}</td>
                <td>{{i.Amount}}</td>
                <td class="split" STYLE="background:#C5C5C5">{{i.Amount}}</td>
            </tr>


			</tbody>
			<tfoot>
				<tr>
					<td align="center">&nbsp;</td>
					<td align="center">&nbsp;</td>
					<td align="center">&nbsp;</td>
					<td align="center">&nbsp;</td>
					<td align="right"><div title="1234567891234567.89">1234567891234567.89</div></td>
					<td align="right"><div title="1234567891234567.89">1234567891234567.89</div></td>
					<td align="right"><div title="1234567891234567.89">1234567891234567.89</div></td>
					<td align="center" class="split">&nbsp;</td>
					<td align="right"><div title="1234567891234567">1234567891234567</div></td>
					<td align="right"><div title="1234567891234567">1234567891234567</div></td>
					<td align="right"><div title="1234567891234567">1234567891234567</div></td>
					<td align="right"><div title="1234567891234567">1234567891234567</div></td>
					<td align="right"><div title="1234567891234567">1234567891234567</div></td>
					<td align="right"><div title="1234567891234567">1234567891234567</div></td>
					<td align="right" class="split"><div title="1234567891234567">1234567891234567</div></td>
					<td align="right"><div title="1234567891234567.89">1234567891234567.89</div></td>
					<td align="right"><div title="1234567891234567.89">1234567891234567.89</div></td>
					<td align="right"><div title="1234567891234567.89">1234567891234567.89</div></td>
					<td align="right"><div title="1234567891234567.89">1234567891234567.89</div></td>
					<td align="right"><div title="1234567891234567.89">1234567891234567.89</div></td>
					<td align="right"><div title="1234567891234567.89">1234567891234567.89</div></td>
					<td align="right"><div title="1234567891234567.89">1234567.89</div></td>
					<td align="right"><div title="1234567891234567.89">1234567.89</div></td>
					<td align="right"><div title="1234567891234567.89">1234567.89</div></td>
					<td align="right" class="split"><div title="1234567891234567.89">1234567891234567.89</div></td>
				</tr>
			</tfoot>
		</table>
        </div>
	</div>


</div> <!-- #wrapper -->

<script src="../js/jquery/jquery-1.5.2.min.js"></script>
<script src="../js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="../js/misc/excanvas.min.js"></script>
<script src="../js/jquery/facebox.js"></script>
<script src="../js/jquery/jquery.visualize.js"></script>
<script src="../js/jquery/jquery.dataTables.min.js"></script>
<script src="../js/jquery/jquery.tablesorter.min.js"></script>
<script src="../js/jquery/jquery.uniform.min.js"></script>
<script src="../js/jquery/jquery.placeholder.min.js"></script>

<script src="../js/widgets.js"></script>
<script src="../js/dashboard.js"></script>
<script src="../My97DatePicker/WdatePicker.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script src="../js/jquery/jquery.table2excel.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                list: [],
            }
        },
        mounted() {
            axios.get('/XZMXBB').then(response => (this.list = response.data));
        },
        watch: {
            list: function () {
                this.$nextTick(function () {
                    $(document).ready(function () {
                        Dashboard.init();
                    });
                })
            },
        },
    });

    function ExportToExcel() {
        $("#tableExcel").table2excel({
            exclude: ".noExl", //过滤位置的 css 类名
            filename: "badao.xls", //文件名称
            name: "Excel Document Name.xlsx",
            exclude_img: false,//是否导出图片 false导出
            exclude_links: true,//是否导出链接 false导出
            exclude_inputs: true//是否导出输入框的值 true导出
        });
    }
</script>


</body>

</html>